<!--
 * @Author: ly
 * @Date: 2021-10-25 11:17:24
 * @LastEditors: ly
 * @LastEditTime: 2021-11-02 14:20:54
 * @Description: 顾客管理界面
-->
<template>
<div>
    <!-- 第一行开始 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-button type="primary" style="margin-right:15px" @click="toAdd">添加</el-button>
        <el-form-item>
            <el-input v-model="form.name" placeholder="请输入顾客名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-select v-model="form.status" placeholder="请选择状态" clearable>
                <el-option label="禁用" value="禁用"></el-option>
                <el-option label="正常" value="正常"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- 第一行结束 -->

    <!-- 表格开始 -->
    <div>
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="realname" label="姓名">
            </el-table-column>
            <el-table-column prop="telephone" label="手机号">
            </el-table-column>
            <el-table-column prop="gender" label="性别">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-tag type="success" v-if='scope.row.status==="正常"'>正常</el-tag>
                    <el-tag type="danger" v-else>禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button type="text" class="delete" size="small" @click='deleteById(scope.row.id)'>删除</el-button>
                    <el-button type="text" class="details" size="small" @click="toDetails(scope.row.id)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <div style="text-align:right;margin:5px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[5, 10,15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 分页结束 -->

    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form :model="form" :rules='rules' ref='myForm'>
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="realname">
                <el-input v-model="form.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="telephone">
                <el-input v-model="form.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop='password'>
                <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio-group v-model="form.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                     </el-radio-group>
                </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth" prop='status'>
                    <el-radio-group v-model="form.status">
                        <el-radio label="正常"></el-radio>
                        <el-radio label="禁用"></el-radio>
                    </el-radio-group>
                </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 模态框结束 -->
</div>
</template>

<script>
// 引入栏目数据
import {
    pageQuery,
    cascadeRoleFindAll,
    deleteById,
    findMenuByUserId,
    findUserDetailsById,
    saveOrUpdate
} from "@/api/customer";

export default {
    // 组件名称
    name: "demo",
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            loading: false,
            // form: {
            //     // gender: '',
            // },
            //校验表单
            rules: {
                username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },

                ],
                realname: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },

                ],
                telephone: [{
                    required: true,
                    message: '请输入电话号码',
                    trigger: 'blur',
                }, ],
                password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },

                ],
                status: [{
                        required: true,
                        message: '状态',
                        trigger: 'blur'
                    },

                ],

            },
            // 表格绑定得数据
            tableData: [],
            // 双向数据绑定得表单
            form: {},
            // 控制表单控件宽度
            formLabelWidth: "80px",
            //控制模态框显示与隐藏
            visible: false,
            // 模态框title变量
            title: '',
            total: 0,
            params: {
                page: 1,
                pageSize: 10,
                roleId: 6,
            },
            category: [],
            tableData: []
        }
    },
    watch: {
        params: {
            handler() {
                this.categoryPage();
                this.categoryPro();
            },
            deep: true
        }
    },
    created() {
        this.categoryPage();
    },
    methods: {
        // 去删除
        async deleteById(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await deleteById({
                    id
                });
                console.log(res);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                // 重载数据
                this.categoryPage()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //跳转到详情页
        toDetails(id) {
            this.$router.push({
                path: "/customerdetails/List",
                query: {
                    id,
                }
            })
        },
        // 重置表单校验
        toClose() {
            this.$refs["myForm"].resetFields();
            for (let key in this.form) {
                this.form[key] = '';
            }
            this.visible = false;
        },
        //给添加按钮绑定事件
        toAdd() {
            //显示模态框
            this.visible = true;
            this.title = "添加顾客信息";
            this.form = {};
        },
        // 给编辑按钮绑定事件
        toEdit(row) {
            this.visible = true;
            this.title = "修改顾客信息";
            this.form = {
                ...row
            }; //将当前行数据解构出来
        },
        // 封装分页查询
        async categoryPage() {
            let temp = {
                ...this.params,
                ...this.form
            };
            for (let key in temp) {
                if (!temp[key]) {
                    delete temp[key];
                }
            }
            let res = await pageQuery(temp);
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
        },
        // 去保存
        toSave() {
            this.$refs["myForm"].validate(async valid => {
                if (valid) {
                    // alert('submit!');
                    let res = await saveOrUpdate(this.form);
                    this.$notify.success({
                        title: "保存成功",
                        message: res.message,
                        type: "success"
                    });
                    this.toClose();
                    this.categoryPage();
                    // this.visible=false;
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        //   给搜索按钮绑定事件 --模糊查询
        toSearch() {
            this.categoryPage();
        },
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
        },
        handleCurrentChange(page) {
            this.params.page = page;
        },
        // 封装所有栏目
        async categoryPro() {
            let res = await pageQuery({
                page: 1,
                pageSize: 10
            });
            // console.log(res)
            this.category = res.data.list;
        }
    },
}
</script>

<style lang="scss">
.delete{
    color:#ed8e9a
}
.details{
    color:#759cc2
}
</style>
